<template>
  <div>
    <h3>Home组件</h3>
    <!-- 
      如果直接使用router-link 组件进行导航 被称作为声明式路由导航
      router-link声明式导航底层仍然使用的式编程式路由导航，已经默认解决了重复导航的bug
          - to属性：就是push方法接受的第一个参数location
          - replace属性：替换历史记录
          - tag属性：想要<router-link>渲染成某种标签例如<li> 就可以使用tag 属性 prop类指定何种标签，同样它还是会监听点击，触发导航
          - active-class属性：设置连接激活时使用的CSS类名
     -->

    <router-link to="/home/new" tag="button" active-class="active">
      新闻
    </router-link>
    <router-link
      :to="{
        path: '/home/game',
      }"
      tag="button"
      active-class="active">
      游戏
    </router-link>
    <router-link
      :to="{
        name: 'movie',
      }"
      tag="button"
      active-class="active">
      电影
    </router-link>
    <hr />
    <hr />
    <router-link to="/home/new" replace>新闻replace</router-link>
    <router-link
      :to="{
        path: '/home/game',
      }"
      replace>
      游戏replace
    </router-link>
    <router-link
      :to="{
        name: 'movie',
      }"
      replace>
      电影replace
    </router-link>

    <!-- 路由组件的缓存 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style scoped>
a {
  margin-left: 20px;
}
button {
  margin-left: 20px;
}
.active {
  background: red;
  color: aliceblue;
  outline: none;
  border-color: red;
}
</style>
